<template>
    <div class="membershipCard">
      <div class="title">
        <div class="back-wrapper" @click="$router.push({path:'/index/user'})">
          <back :click="false"></back>
        </div>
        我的会员卡
      </div>
      <div class="content">
        <transition name="fade">
          <div class="mask-layer" v-show="isShowMask">
            <div class="alert-container">
              <div class="top border-1px">温馨提示</div>
              <div class="content border-1px">
                您确定要解除此会员卡吗？
              </div>
              <div class="bottom">
                <div class="left" @click="_cancelMembershipCard">确定</div>
                <div class="line"></div>
                <div class="right" @click="isShowMask=false">取消</div>
              </div>
            </div>
          </div>
        </transition>
        <div class="addCard" v-if="isMember===0" @click="_addCard()">
          <div class="icon"></div>
          <p class="text">添加会员卡</p>
        </div>
        <div class="myCard" v-for="item in cardList" v-if="isMember===1">
          <div class="bg-img-wrapper">
            <div class="name">VIP CARD</div>
            <div class="btn-relieve" @click="_showMaskLayer(item.vipCardId)">解绑</div>
            <div class="cardNum">卡号: {{item.cardNumber}}</div>
            <div class="tel">绑定手机: {{item.hidePhone}}</div>
            <div class="time">有效期至: {{item.validateDate}}</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import {getStorage} from "../../../common/js/localStorage";
  import {Toast} from 'mint-ui'
  import {getSession} from "../../../common/js/sessionStorage";
  import global from '../../../common/js/global'
    export default {
        name: "membershipCard",
        components:{
          'back':back
        },
        data(){
          return{
            cardList:[],
            isMember:0,
            currentCheckedCardId:'',
            isShowMask:false
          }
        },
        mounted(){
          this._getMembershipCardInfo()
        },
        methods:{
          //添加会员卡
          _addCard(){
            if(getStorage('userInfo')===''||getStorage('userInfo')===undefined||getStorage('userInfo')===null){
              this.$router.push('/login')
            }else{
              this.$router.push({path:'/addCard'})
            }
          },
          //获取搜索影院列表
          _getSearchCinemaList(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/searchCinemas',
                data:{
                  name:'',
                  longitude:getSession('point').lng,
                  latitude:getSession('point').lng,
                  offset:0,
                  rows:10,
                }
              }
            ).then((res)=>{
              if(res.data.status===global.ERR_OK){
                if(res.data.code===0){
                  Toast(res.data.data.msg)
                  this._getMembershipCardInfo()
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.data.status)
              }

            })
          },
          //解除会员卡
          _cancelMembershipCard(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/member/unBindCinemaVipCard',
                data:{
                  vipCardId:this.currentCheckedCardId
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  Toast(res.data.data.msg)
                  this.isShowMask = false
                  this._getMembershipCardInfo()
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.data.status)
              }

            })
          },
          _showMaskLayer(id){
            this.isShowMask=true
            this.currentCheckedCardId=id
          },
          //获取会员卡信息
          _getMembershipCardInfo(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:'/api/member/myCinemaVipCard',
                data:{

                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  this.cardList = data.cardInfoList
                  this.isMember = data.existStatus
                }else if(res.data.code===10){
                  this.$router.push('/login')
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.status)
              }

            })
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .membershipCard
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 72px)
      padding 20px 10px
      overflow hidden
      position relative
      .mask-layer
        height 100%
        width 100%
        position absolute
        top 0
        left 0
        background rgba(0,0,0,.7)
        z-index 100
        &.fade-enter-active, &.fade-leave-active
          transition: opacity .3s;
        &.fade-enter, &.fade-leave-to
          opacity: 0;
        .alert-container
          position relative
          top 120px
          width calc(100% - 80px)
          margin 0 auto
          background #171718
          border-radius 3px
          overflow hidden
          .top
            height 44px
            color #ffffff
            line-height 44px
            font-size 16px
            border-1px(#525252)
          .content
            padding 10px 12px
            text-align left
            border-1px(#525252)
            min-height 80px
            font-size 14px
            line-height 17px
            color #ffffff
          .bottom
            display flex
            height 44px
            line-height 44px
            font-size 16px
            color #F7C20F
            .left,.right
              flex 1
            .left
              &:active
                background #525252
            .right
              &:active
                background #525252
            .line
              flex 0 0 1px
              background #525252
      .addCard
        height 180px
        border 2px dashed #F7C20F
        border-radius 6px
        .icon
          height 80px
          background url("icon_add.svg")no-repeat center/48px 48px
          margin-top 25px
        .text
          height 95px
          line-height 60px
          font-size 16px
          color #F7C20F
      .myCard
        height 180px
        background linear-gradient(to bottom right , #f7ce06, #ff8c02)
        border-radius 6px
        .bg-img-wrapper
          position relative
          width 100%
          height 100%
          background url("bg_huiyuan.svg")no-repeat calc(100% - 30px) calc(100% - -30px)/80px 180px
          .name
            position absolute
            top 10px
            left 10px
            width 120px
            text-align left
            height 32px
            font-size 24px
            color rgba(223,156,23,.7)
            line-height 32px
          .btn-relieve
            position absolute
            right 10px
            top 13px
            height 22px
            line-height 22px
            border-radius 2px
            font-size 14px
            border 1px solid #020805
            width 44px
          .cardNum
            height 22px
            padding-top 80px
            font-size 22px
            text-align center
          .tel
            padding-top 24px
            padding-left 15px
            text-align left
            height 22px
            line-height 22px
            color #252929
            font-size 14px
          .time
            padding-left 15px
            text-align left
            height 22px
            line-height 22px
            color #252929
            font-size 14px
</style>


